<template>
  <div class="upload-demo">
    <ul class="el-upload-list el-upload-list--picture-card">
      <li v-for="(file,index) in fileList" :key="index" class="el-upload-list__item is-success">
        <template v-if="file.type=='image'">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete" @click="handlePictureCardPreview(file)">
              <i class="el-icon-zoom-in" />
            </span>
            <span  class="el-upload-list__item-delete" @click="handleDownload(file)">
              <i class="el-icon-download" />
            </span>
          </span>
        </template>
        <template v-else-if="file.type==='video'">
          <video class="el-upload-list__item-thumbnail" :src="file.url" controls />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete" @click="handlePictureCardPreview(file)">
              <i class="el-icon-zoom-in" />
            </span>
            <span  class="el-upload-list__item-delete" @click="handleDownload(file)">
              <i class="el-icon-download" />
            </span>
          </span>
        </template>
        <template v-else-if="file.type==='pdf'">
          <div style="width: 100%;height: 100%;line-height: 148px;text-align: center">
            <img style="max-width: 100%" src="~@/assets/img/download/.pdf.png" alt="">
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-delete" @click="handleDownload(file)">
                <i class="el-icon-download" />
              </span>
            </span>
          </div>
        </template>
        <template v-else-if="file.type==='doc'">
          <div style="width: 100%;height: 100%;line-height: 148px;text-align: center">
            <img style="max-width: 100%" src="~@/assets/img/download/.word.png" alt="">
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-delete" @click="handleDownload(file)">
                <i class="el-icon-download" />
              </span>
            </span>
          </div>
        </template>
        <template v-else-if="file.type==='xls'">
          <div style="width: 100%;height: 100%;line-height: 148px;text-align: center">
            <img style="max-width: 100%" src="~@/assets/img/download/.excel.png" alt="">
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-delete" @click="handleDownload(file)">
                <i class="el-icon-download" />
              </span>
            </span>
          </div>
        </template>
        <template v-else-if="file.type==='ppt'">
          <div style="width: 100%;height: 100%;line-height: 148px;text-align: center">
            <img style="max-width: 100%" src="~@/assets/img/download/.ppt.png" alt="">
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-delete" @click="handleDownload(file)">
                <i class="el-icon-download" />
              </span>
            </span>
          </div>
        </template>
        <template v-else-if="file.type==='audio'">
          <audio class="el-upload-list__item-thumbnail" :src="file.url" controls />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete" @click="handleDownload(file)">
              <i class="el-icon-download" />
            </span>
          </span>
        </template>
        <template v-else-if="file.type==='zip'">
          <div style="width: 100%;height: 100%;line-height: 148px;text-align: center">
            <img style="max-width: 100%" src="~@/assets/img/download/.zip.png" alt="">
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-delete" @click="handleDownload(file)">
                <i class="el-icon-download" />
              </span>
            </span>
          </div>
        </template>
        <template v-else>
          <div style="width: 100%;height: 100%;line-height: 148px;text-align: center">
            <img style="max-width: 100%" src="~@/assets/img/download/.txt.png" alt="">
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-delete" @click="handleDownload(file)">
                <i class="el-icon-download" />
              </span>
            </span>
          </div>
        </template>
      </li>

    </ul>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img v-if="dialogType=='image'" width="100%" :src="dialogImageUrl" alt="">
      <video v-if="dialogType==='video'" width="100%" :src="dialogImageUrl" controls />
    </el-dialog>
  </div>

</template>
<script>
import { imgPath } from '../../../filters'
import { matchType } from '../../../utils'
export default {
  name: 'FileType',
  props: ['files'],
  data() {
    return {
      fileList: [],
      dialogImageUrl: '',
      dialogType: '',
      dialogVisible: false,
    }
  },
  watch: {
    files(val) {
      if (val) {
        this.setFileList()
      }
    }
  },
  created() {
    if (this.files) {
      this.setFileList()
    }
  },
  methods: {
    setFileList() {
      let srcArr = this.files.split(';')
      this.fileList = srcArr.map(item => {
        return {
          name: item.substring(item.lastIndexOf('/') + 1, item.length),
          url: imgPath(item),
          baseUrl: item,
          type: matchType(item)
        }
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogType = file.type
      this.dialogVisible = true
    },
    handleDownload(file) {
      window.open(file.url)
    },
  }
}
</script>

